<template>
    <div class="multiFactorFilter">
        <div class="selectArea">
            <template v-for="(area,index) in option" :key="index">
                <div class="area" v-if="area.type=='radio'">
                    <div class="title">{{area.name}}</div>
                    <div class="itemArea">
                        <van-radio-group :v-model="key" v-for="(data,key,index) in area.data" :key="key">
                            <div class="item" 
                                :class="(key == 'duration'?(duration == item.name ? item.checked = 'checked' : ''):(distance == item.name ? item.checked = 'checked' : ''))" 
                                :name="item.name" 
                                v-for="(item,index) in data" 
                                :key="index" 
                                @click="(key == 'duration'?(duration == item.name ? duration = '' : duration = item.name):(distance == item.name ? distance = '' : distance = item.name))"
                            >{{item.value}}{{area[key]}}</div>
                        </van-radio-group>
                    </div>
                </div>
                <div class="area" v-else-if="area.type=='checkbox'">
                    <div class="title">{{area.name}}</div>
                    <div class="itemArea">
                        <van-checkbox-group :v-model="key" v-for="(data,key,index) in area.data" :key="key">
                            <template v-if="key == 'discount'">
                                <div class="item" 
                                    :class="item.checked?'checked':''"  
                                    :name="item.name" 
                                    v-for="(item,index) in data" 
                                    :key="index" 
                                    @click="discountSelect(item)"
                                >{{item.name}}</div>
                            </template>
                            <template v-else-if="key == 'service'">
                                <div class="item" 
                                    :class="item.checked?'checked':''"  
                                    :name="item.name" 
                                    v-for="(item,index) in data" 
                                    :key="index"
                                    @click="serviceSelect(item)"
                                >
                                    <img :src="item.src" alt="">
                                    <span>{{item.name}}</span>
                                </div>
                            </template>
                        </van-checkbox-group>
                    </div>
                </div>
            </template>
        </div>
        <div class="footerBtnGroup">
            <div class="clearBtn" :class="isClear?'disabled':''" @click="clearAllSelect">清空</div>
            <div class="filterBtn" @click="requireFilter">查看</div>
        </div>
    </div>
</template>

<script>
import { ref, reactive, watch, computed, onMounted, toRefs } from 'vue';
import { filterShops } from '@/api/shop';
export default {
    name:'MultiFactorFilter',
    setup(props,context){
        const option = reactive([
            {
                type:'radio',
                name:'速度',
                data:{
                    duration:[{name:'30',value:'30分钟内'},{name:'40',value:'40分钟内'},{name:'50',value:'50分钟内'}],
                    distance:[{name:'1000',value:'1km内'},{name:'2000',value:'2km内'},{name:'3000',value:'3km内'}]
                }
            },
            {
                type:'checkbox',
                name:'活动红包',
                data:{discount:[{name:'首次光顾立减'},{name:'满减优惠'},{name:'下单返红包'},{name:'减配送费'},{name:'赠品优惠'},{name:'特价商品'},{name:'店铺红包'},{name:'爆红包'}]}
            },
            {
                type:'checkbox',
                name:'商家服务',
                data:{
                    service:[
                        {name:'蓝骑士转送',src:require('@/assets/img/icon/option_service_1.png')},
                        {name:'到店自取',src:require('@/assets/img/icon/option_service_2.png')},
                        {name:'品牌商家',src:require('@/assets/img/icon/option_service_3.png')},
                        {name:'新店',src:require('@/assets/img/icon/option_service_4.png')},
                        {name:'接受预定',src:require('@/assets/img/icon/option_service_5.png')},
                        {name:'食无忧',src:require('@/assets/img/icon/option_service_6.png')},
                        {name:'开发票',src:require('@/assets/img/icon/option_service_7.png')},
                        {name:'透明餐厅',src:require('@/assets/img/icon/option_service_8.png')},
                        {name:'极速退',src:require('@/assets/img/icon/option_service_9.png')},
                        {name:'售后无忧',src:require('@/assets/img/icon/option_service_10.png')},
                    ]
                }
            }
        ])
        const selectedData = reactive({
            duration:'',
            distance:'',
            discount:[],
            service:[]
        })
        watch(selectedData,(newVal,oldVal)=>{
            console.log('selectedData',newVal);
        })
        const {duration, distance, discount, service} = toRefs(selectedData);
        const discountSelect = (item) => {
            if(discount.value.includes(item.name)) discount.value.splice(discount.value.indexOf(item.name),1);
            else discount.value.push(item.name);
            item.checked = !item.checked;
            console.log(discount.value)
        }
        const serviceSelect = (item) => {
            if(service.value.includes(item.name)) service.value.splice(service.value.indexOf(item.name,1));
            else service.value.push(item.name);
            item.checked = !item.checked;
            console.log(service.value)
        }
        // 清空按钮是否禁用
        const isClear = computed(()=>{
            console.log('duration',duration.value == '','distance',distance.value == '','discount',discount.value.length == 0,'service',service.value.length == 0);
            console.log('----------------------------');
            return duration.value == '' && distance.value == '' && discount.value.length == 0 && service.value.length == 0;
        })
        // 清空
        const clearAllSelect = () => {
            duration.value = '';
            distance.value = '';

            discount.value = [];
            option[1].data.discount.forEach(item=>{
                item.checked = false;
            })

            service.value = [];
            option[2].data.service.forEach(item=>{
                item.checked = false;
            })
        }
        const requireFilter = () => {
            console.log(isClear.value);
            console.log(selectedData);
            if(isClear.value == false){
                filterShops(selectedData)
                    .then(res=>{
                        console.log(res)
                    })
                    .catch(error=>{
                        console.log(error)
                    })
            }
        }
        onMounted(()=>{
            // 活动红包 选中状态初始化
            props.selectDiscountArr.forEach(name=>{
                option[1].data.discount.forEach((item)=>{
                    if(item.name == name) item.checked = true;
                })
            })
            discount.value = props.selectDiscountArr;
        });
        return {
            option,
            duration,
            distance,
            discount,
            service,
            discountSelect,
            serviceSelect,
            isClear,
            clearAllSelect,
            requireFilter
        }
    },
    props:['selectDiscountArr']
}
</script>

<style>
.multiFactorFilter{
    position: fixed;
    top: 113px;
    left: 0;
    z-index: 999;
    width: 100%;
    background: #fff;
}
.multiFactorFilter .selectArea{
    padding: 10px 15px;
    box-sizing: border-box;
    height: 500px;
    overflow: scroll;
}
.area .title{
    margin: 5px 0;
    font-size: 12px;
    color: #aaa;
}
.area .itemArea{

}
.area .itemArea .van-radio-group,.van-checkbox-group{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.area .itemArea .item{
    width:25%;
    flex-shrink: 0;
    margin: 5px;
    padding: 10px;
    text-align: center;
    font-size: 12px;
    color: rgb(106, 106, 106);
    background: rgb(248, 248, 248);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.area .itemArea .item.checked{
    background: rgba(0, 139, 245, 0.1);
    color: rgb(0, 139, 245);
    font-weight: bold;
}
.area .itemArea .item img{
    margin-right: 3px;
    height: 16px;
}
.multiFactorFilter .footerBtnGroup{
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-top: 1px solid #f5f5f5;
    display: flex;
}
.multiFactorFilter .footerBtnGroup>div{flex-grow: 1;text-align: center;font-size: 14px;}
.multiFactorFilter .footerBtnGroup .clearBtn{}
.multiFactorFilter .footerBtnGroup .clearBtn.disabled{color: #aaa;}
.multiFactorFilter .footerBtnGroup .filterBtn{background: #02b6fd;color: #fff;}
</style>